<template>
  <div id="app" class="block">
    <el-dropdown style="margin-top:1vh;" @command="handleCommand">
      <el-avatar
        shape="square"
        fit="fill"
        :src="this.$store.state.avatarUrl"
      ></el-avatar>
      <el-dropdown-menu
        slot="dropdown"
        style="background-color:rgba(255,255,255,0.9);margin-top:-1vh;width:8vw;text-align:center"
      >
        <el-dropdown-item command="a">个人中心</el-dropdown-item>
        <el-dropdown-item command="b" v-if="!isIdentify">个人认证</el-dropdown-item>
        <el-dropdown-item command="c" v-else>发布信息</el-dropdown-item>
        <el-dropdown-item command="d">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="ninckName">
      <p style="margin-top:-8vh;font-size:12px">
        {{ this.$store.state.ninckName }}
      </p>
    </div>
  </div>
</template>

<script>
import { getPic, getnickname } from "network/home";
import { getPv } from "network/profile.js";
export default {
  data() {
    return {
      isIdentify: false
    };
  },
  methods: {
    handleCommand(commond) {
      if (commond == "a") {
        this.$router.push("/profile");
      } else if (commond == "b") {
        this.$store.state.personalAu = true;
        this.$router.push("/profile");
      } else if (commond == "c") {
        this.$router.push("/charity/stucharity");
      } else if (commond == "d") {
        this.quitLogin();
      } else {
      }
    },
    quitLogin() {
      this.$store.state.isLogin == false;
      sessionStorage.setItem("userToken", "");
      location.replace("/login/home");
    },
    async nav() {
      if (this.$store.state.isLogin == true) {
        getnickname(localStorage.getItem("username"))
          .then(res => {
            if (res.code !== 20001) {
              this.$store.commit("setNickName", res);
              this.admin = res;
              getPv(localStorage.getItem("username")).then(res => {
                if (res == "通过") {
                  this.isIdentify = true;
                } else {
                  this.isIdentify = false;
                }
              });
            }
          })
          .catch(err => {
            this.admin = "Admin";
          });
        const res = await getPic();
        // console.log(res.data.infoVo.url);
        this.$store.commit("setAvatarUrl", res.data.infoVo.url);
      }
    },
    showHello() {
      this.show = !this.show;
    }
  },
  created() {
    this.nav();
  },
  watch: {}
};
</script>

<style scoped>
#reg-login {
  display: block;
}
#avatar {
  width: 35px;
  height: 35px;
  align-items: center;
  border: 1px solid black;
  overflow: hidden;
  margin-top: 25px;
  margin-left: 20px;
  border-radius: 50%;
  display: none;
}
#avatar img {
  position: relative;
  line-height: 25px;
}
.quit {
  position: absolute;
  right: 100px;
  top: 155px;
  font-size: 14px;
  background-color: transparent;
}
.quit #infos {
  width: 100%;
  height: 100%;
}
#infos li {
  margin-top: 2px;
}
#infos li:hover {
  cursor: pointer;
  color: blueviolet;
}
.ninckName {
  width: 12vh;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
}
</style>
